<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" th:href="@{/easy-ui/themes/default/easyui.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/easy-ui/themes/icon.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/easy-ui/themes/demo.css}"/>
</head>
<body>
	<h2>任务列表</h2>
	<p>1.任务是要和触发器关联才可以的</p>
	<div style="margin:20px 0;"></div>
	
	<table id="tt" class="easyui-datagrid" rownumbers="true" toolbar="#tb" title="任务列表">
	</table>
	<div id="tb" style="padding:3px">
		<span>姓名:</span>
		<input id="userName" style="line-height:26px;border:1px solid #ccc"/>
		<span>邮箱:</span>
		<input id="emailAddress" style="line-height:26px; border:1px solid #ccc;"/>
		<a href="#" class="easyui-linkbutton" id="serachLink" data-options="iconCls:'icon-search'">查询</a>
		<a href="#" class="easyui-linkbutton" id="addLink" data-options="iconCls:'icon-add'">新增任务</a>
	</div>
	<div id="addDlg" class="easyui-dialog" title="添加任务" data-options="iconCls:'icon-save'"
	style="width:80%;height:400px;max-width:800px;padding:10px">
			<form id="ff">
				<div style="margin-bottom:20px">
					<input class="easyui-textbox" id="jobName" name="jobName" style="width:100%" data-options="label:'任务名称:',required:true"/>
				</div>
				<div style="margin-bottom:20px">
					<input class="easyui-textbox" id="jobGroupName" name="jobGroupName" style="width:100%" data-options="label:'任务组名:'"/>
				</div>
				<div style="margin-bottom:20px">
					<input class="easyui-textbox" id="jobDescription" name="jobDescription" style="width:100%;height:60px" data-options="label:'任务描述:',multiline:true"/>
				</div>
				<!-- <div style="margin-bottom:20px">
					<select class="easyui-combobox" name="language" label="Language" style="width:100%"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
				</div> -->
			</form>
			<div style="text-align:center;padding:5px 0">
				<a href="javascript:void(0)" class="easyui-linkbutton" id="addSubmit" style="width:80px">提交</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">重置</a>
			</div>
			<div id="addErrorMsg" style="text-align:center;padding:5px 0;display:none;">
				<p style="color:red;font-weight:bold"></p>
			</div>
	</div>
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.js}"></script>
<script type="text/javascript" th:src="@{/easy-ui/jquery.easyui.min.js}"></script>
<script type="text/javascript">
	function clearForm(){
		$('#ff').form('clear');
		$("#addErrorMsg").hide();
	}
	var page_size = 10;
	$(function(){
		$('#tt').datagrid({
			url: '/index/get_jobs',
			//loadFilter: function(data) { // data: 服务器返回数据
				// 按照现在的服务器返回数据格式，此函数可以不写
				// 该函数必须返回标准数据对象，含有 'total' 和 'rows' 属性。
			//	return data;
			//}, // 虽然注释掉了但是很重要
			columns: [[
				{field:'jobName',title:'任务名',width:10},
				{field:'jobGroupName',title:'任务所在组',width:10},
				{field:'jobClass',title:'任务类',width:20},
		/*{field:'deleteStatus',title:'是否有效',width:20, 
					formatter: function(value,row,index){
						if (value == "0") {
							return '<a href="javascript:;" data-id="'+value+'" target="_blank">可用</a>';
						}else {
							return '<a href="javascript:;" data-id="'+value+'" target="_blank">不可用</a>';
						}
					}
				}, */
				{field:'createTime',title:'创建时间',width:10},
				{field:'relation',title:'操作',width:10,
					formatter: function(value,row,index) { // 格式化输出
						// value：字段的值。
						// rowData：行的记录数据。
						// rowIndex：行的索引。
						
						// 当多列数据的field值相同时，formatter就会失效。
						if (value == "1") {
							return '<a href="javascript:;" data-id="'+value+'" target="_blank">解除触发器关联</a>';
						}else {
							return '<a href="javascript:;" data-id="'+value+'" target="_blank">触发器关联</a>';
						}
					}
				},{
					field: 'jobDescription',
					title: '任务描述',
					width:10
				}
			]],
			pagination: true, // 开启分页
			
			// 自定义pageSize时必须同时设置pageList，否则不生效
			// 如果pageSize的值不在pageList中时，程序会以pageList中最小的值显示，而设置的pageSize依然无效。
			pageSize: page_size,  // 每页显示数page_size自定义全局变量
			pageList: [page_size, page_size*2, page_size*3],
			emptyMsg: '没有找到相关数据', // 没有数据的场合
			idField: 'userName', // 指示哪个字段是标识字段。
			striped: true, // 设置为 true，则把行条纹化。（即奇偶行使用不同背景色）
			queryParams: { // 初期查询
				jsonString: JSON.stringify({limit: 0, pageSize: page_size})
			},
			fitColumns: true // 自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动
		});

		// 分页事件
		var pg = $('#tt').datagrid('getPager'); // 返回分页（pager）对象。
		if (pg) {
			$(pg).pagination({
				onSelectPage:function(pageNumber, pageSize){
					// 算出当前偏移量
					var limit = pageSize*pageNumber-pageSize;
					// reload: 重新加载行，就像 load 方法一样，但是保持在当前页。
		            $("#tt").datagrid("reload",{jsonString: JSON.stringify({limit: limit, pageSize: pageSize})});  
				},
				// 自定义显示布局
				//layout: ['list','sep','first','prev','sep','manual','sep','links','next','last','sep','efresh']
			});
		}
		
		
		// 点击查询
		$('#tb').on('click', '#serachLink' ,function(e){
			var userName = $("#userName").val(),
				emailAddress = $("#emailAddress").val();
			
			var obj = {
						userName: userName == '' ? undefined : userName,
						emailAddress: emailAddress == '' ? undefined : emailAddress,
						limit: 0, 
						pageSize: page_size
			};
			
			// 检索数据库
			// load: 加载并显示第一页的行
			$('#tt').datagrid('load',{
					jsonString: JSON.stringify(obj)
			});
		});
		
		$('#tb').on('click', '#addLink' ,function(e){
			$('#addDlg').dialog('open');
			
		});
		
		$("#addSubmit").click(function(){
			var checkForm = $('#ff').form('enableValidation').form('validate');
			if(checkForm){
				var jobName = $('#jobName').val(),
					jobGroupName = $('#jobGroupName').val(),
					jobDescription = $('#jobDescription').val();
				var param={
						jobName: jobName,
						jobGroupName: jobGroupName,
						jobDescription: jobDescription
				};
				
				$.ajax({
					url: '/index/addJob',
					type: 'post',
					data: param,
					dataType: 'json'
				}).done(function(data){
					if(data.success == false){
						$("#addErrorMsg").show().find('p').text(data.msg);
					}else{
						// 添加成功后关闭弹出框
						$('#addDlg').dialog('close');
						// 重新加载table
						var obj = {
						limit: 0, 
						pageSize: page_size
						};
						
						// 检索数据库
						// load: 加载并显示第一页的行
						$('#tt').datagrid('load',{
								jsonString: JSON.stringify(obj)
						});
					}
				});
			}
		});
	});
</script>

</body>
</html>